<template>
      <div style="width: 100%;height: 100%">
        <van-nav-bar style="background-color: #73b9ff;" fixed left-arrow>
          <template #left>
            <el-avatar
              src="required('src/assets/logo.png')">
            </el-avatar>
          </template>
          <template #right>
            <van-popover
              v-model="showPopover"
              trigger="click"
              :actions="actions"
              @select="onSelect"
              placement="bottom-end"
            >
              <template #reference>
                <van-icon name="plus" size="18"/>
              </template>
            </van-popover>

          </template>
        </van-nav-bar>
        <div class="chat_list_box">
          <van-search
            v-model="searchValue"
            shape="round"

            placeholder="请输入搜索关键词"
          />
          <van-cell-group>
            <van-cell style="position: relative" @click="chatBoxfunc()" value="内容" label="描述信息" >
              <div slot="title">
                <el-avatar
                  style="position: absolute;left: 1rem"
                  src="required('src/assets/logo.png')">
                </el-avatar>
                <span>单元格</span>
              </div>
              <template #right>
                <van-button square type="danger" text="删除" />
                <van-button square type="primary" text="收藏" />
              </template>
            </van-cell>
            <van-cell title="单元格" value="内容" label="描述信息" />
            <van-cell title="单元格" value="内容" label="描述信息" />
            <van-cell title="单元格" value="内容" label="描述信息" />
            <van-cell title="单元格" value="内容" label="描述信息" />
            <van-cell title="单元格" value="内容" label="描述信息" />
            <van-cell title="单元格" value="内容" label="描述信息" />
            <van-cell title="单元格" value="内容" label="描述信息" />
            <van-cell title="单元格" value="内容" label="描述信息" />
            <van-cell title="单元格" value="内容" label="描述信息" />
            <van-cell title="单元格" value="内容" label="描述信息" />
            <van-cell title="单元格" value="内容" label="描述信息" />
            <van-cell title="单元格" value="内容" label="描述信息" />
            <van-cell title="单元格" value="内容" label="描述信息" />
            <van-cell title="单元格" value="内容" label="描述信息" />
          </van-cell-group>
        </div>
      </div>
</template>

<script>
    export default {
        name: "ChatList",
      data() {
        return {
          active: 0,
          searchValue:'',
          icon: {
            active: 'https://img01.yzcdn.cn/vant/user-active.png',
            inactive: 'https://img01.yzcdn.cn/vant/user-inactive.png',
          },
          showPopover: false,
          // 通过 actions 属性来定义菜单选项
          actions: [{ text: '选项一' }, { text: '选项二' }, { text: '选项三' }],
        };
      },
      methods: {
        onSelect(action) {
          console.log(action.text);
        },
        chatBoxfunc(){
          console.log(123)
          this.$router.push({
            path:"/chatBoxView",
            params: {
              clickUserId:"123",
            }
          })
        }
      },
    }
</script>

<style scoped>
.chat_list_box{
  width: 100%;
  margin-top: 3rem;
}
</style>
